<template>
  <div class="backTopCombination" v-if="oItem">
    <div class="styleWrapper" v-if="oItem.ename == 'displayType'">
      <div class="left">{{ oItem.title }}</div>
      <div class="right">
        <el-radio-group v-model="oItem.value" @change="displayTypeChangeHandle">
          <el-radio v-for="o in oItem.options" :key="o.id" :label="o.value">{{
            o.name
          }}</el-radio>
        </el-radio-group>
        <div class="iconWrapper" v-show="oItem.value == 'icon'">
          <chooseIconComponent
            data-title="返回顶部图标"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[0].catalog[0]"
            :isOnlyIcon="true"
            ename="backTopIcon"
            controlName="chooseSingleIcon"
            @updateParent="chooseBackTopIconAfterUpdateToParent"
          ></chooseIconComponent>
          <colorComponent
            data-title="图标颜色"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[0].catalog[1]"
            @updateParent="chooseBackTopIconColorAfterUpdateToParent"
          ></colorComponent>
          <colorComponent
            data-title="背景颜色"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[0].catalog[2]"
            @updateParent="chooseBackTopBgColorAfterUpdateToParent"
            style="margin-bottom: 10px"
          ></colorComponent>
          <sliderComponent
            data-title="背景透明度"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[0].catalog[3]"
            @updateParent="chooseBackTopBgOpacityAfterUpdateToParent"
            style="margin-bottom: 1px"
          ></sliderComponent>
          <sliderComponent
            data-title="按钮大小"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[0].catalog[4]"
            @updateParent="chooseBackTopSizeAfterUpdateToParent"
          ></sliderComponent>
        </div>
        <div class="imgWrapper" v-show="oItem.value == 'img'">
          <chooseImageComponent
            data-title="返回顶部图片"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[1].catalog[0]"
            controlName="chooseSingleImg"
            style="margin-bottom: 5px"
            @updateParent="chooseBackTopImgAfterUpdateToParent"
          ></chooseImageComponent>
          <sliderComponent
            data-title="按钮大小"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.options[0].catalog[4]"
            @updateParent="chooseBackTopSizeAfterUpdateToParent"
          ></sliderComponent>
        </div>
      </div>
    </div>
    <div class="positionWrapper" v-if="oItem.ename == 'buttonPosition'">
      <div class="left">{{ oItem.title }}</div>
      <div class="right">
        <el-radio-group
          v-model="oItem.value"
          @change="buttonPositionChangeHandle"
        >
          <el-radio v-for="o in oItem.options" :key="o.id" :label="o.value">{{
            o.name
          }}</el-radio>
        </el-radio-group>
        <div class="positionWrapperSlider">
          <sliderComponent
            data-title="上下偏移"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.catalog[0]"
            style="margin-bottom: 1px;"
            @updateParent="chooseBackTopOffsetUpdateToParent"
          ></sliderComponent>
          <sliderComponent
            data-title="左右偏移"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.catalog[1]"
            style="margin-bottom: 1px;"
            @updateParent="chooseBackTopLRUpdateToParent"
          ></sliderComponent>
          <sliderComponent
            data-title="显示高度"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="oItem.catalog[2]"
            style="margin-bottom: 1px;"
            @updateParent="chooseBackTopScrollTopUpdateToParent"
          ></sliderComponent>
        </div>
      </div>
    </div>
    <div class="eventWrapper" v-if="oItem.ename == 'iconEvent'">
      <div class="left">{{ oItem.title }}</div>
      <div class="right">
        <el-radio-group v-model="oItem.value" @change="switchIconEventHandle">
          <el-radio v-for="o in oItem.options" :key="o.id" :label="o.value">{{
            o.name
          }}</el-radio>
        </el-radio-group>
        <div class="eventWrapperChooseLink" v-show="oItem.value == 'jumpLink'">
          <chooseLinkComponent
            data-title="跳转链接"
            :rightIndex="rightIndex"
            :catalogIndex="catalogIndex"
            :id="id"
            :item="{
              title: oItem.options[1].url.title,
              linkUrl: oItem.options[1].url.linkUrl,
              linkName: oItem.options[1].url.linkName,
            }"
            @updateParent="chooseBackTopLinkChange"
          ></chooseLinkComponent>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
import backTopImage from "@/static/images/backTop.png";
export default {
  name: "backTopCombination",
  data() {
    return {
      oItem: null,
      backTopImage,
    };
  },
  created() {},
  props: ["item", "rightIndex", "catalogIndex", "id"],
  components: {
    chooseIconComponent: () => import("../lone/chooseIconComponent.vue"),
    chooseImageComponent: () => import("../lone/chooseImageComponent.vue"),
    colorComponent: () => import("../lone/colorComponent.vue"),
    sliderComponent: () => import("../lone/sliderComponent.vue"),
    chooseLinkComponent: () => import("../lone/chooseLinkComponent.vue"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      if (this.item) {
        this.oItem = null;
        this.$nextTick(() => {
          this.oItem = JSON.parse(JSON.stringify(this.item));
        });
      }
    },
    //展示类型切换事件,更新给直属父级
    displayTypeChangeHandle() {
      let row = {
        value: this.oItem.value,
        ename: "displayType",
        rightIndex: this.rightIndex,
        catalogIndex: this.catalogIndex,
        needUpdateMainChild: true,
        needUpdateMain: false,
      };
      this.$emit("updateParent", JSON.stringify(row));
    },
    //返回顶部图标
    chooseBackTopIconAfterUpdateToParent(params) {
      if (params) {
        let p = JSON.parse(params);
        //标识是否需要更新Main中的子组件
        let needUpdateMainChild = true;
        if (params !== undefined && params !== null) {
          needUpdateMainChild = p.needUpdateMainChild;
        }
        let row = {
          value: p.value,
          ename: "backTopIcon",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        };
        //更新给直属父级
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //选择，返回顶部图标，颜色，改变时向父级上报更新
    chooseBackTopIconColorAfterUpdateToParent(params) {
      if (params) {
        let p = JSON.parse(params);
        //标识是否需要更新Main中的子组件
        let needUpdateMainChild = true;
        if (params !== undefined && params !== null) {
          needUpdateMainChild = p.needUpdateMainChild;
        }
        let row = {
          value: p.value,
          ename: "backTopIconColor",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        };
        //更新给直属父级
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //选择，返回顶部背景颜色，改变时向父级上报更新
    chooseBackTopBgColorAfterUpdateToParent(params) {
      if (params) {
        let p = JSON.parse(params);
        //标识是否需要更新Main中的子组件
        let needUpdateMainChild = true;
        if (params !== undefined && params !== null) {
          needUpdateMainChild = p.needUpdateMainChild;
        }
        let row = {
          value: p.value,
          ename: "backTopIconBgColor",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        };
        //更新给直属父级
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //选择，返回顶部背景颜色透明度，改变时向父级上报更新
    chooseBackTopBgOpacityAfterUpdateToParent(params) {
      if (params) {
        let p = JSON.parse(params);
        //标识是否需要更新Main中的子组件
        let needUpdateMainChild = true;
        if (params !== undefined && params !== null) {
          needUpdateMainChild = p.needUpdateMainChild;
        }
        let row = {
          value: p.value,
          ename: "backTopIconBgOpacity",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        };
        //更新给直属父级
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //选择，返回顶部尺寸大小，改变时向父级上报更新
    chooseBackTopSizeAfterUpdateToParent(params) {
      if (params) {
        let p = JSON.parse(params);
        //标识是否需要更新Main中的子组件
        let needUpdateMainChild = true;
        if (params !== undefined && params !== null) {
          needUpdateMainChild = p.needUpdateMainChild;
        }
        let row = {
          value: p.value,
          ename: "backTopSize",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: true,
        };
        //更新给直属父级
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //选择完图片之后回写
    chooseBackTopImgAfterUpdateToParent(params) { 
      if (params) {
        let p = JSON.parse(params);
        //标识是否需要更新Main中的子组件
        let needUpdateMainChild = true;
        if (params !== undefined && params !== null) {
          needUpdateMainChild = p.needUpdateMainChild;
        }
        let row = {
          value: p.value,
          ename: "backTopImage",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        };
        //更新给直属父级
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //按钮位置切换事件
    buttonPositionChangeHandle() {
       let row = {
        value: this.oItem.value,
        ename: "buttonPosition",
        rightIndex: this.rightIndex,
        catalogIndex: this.catalogIndex,
        needUpdateMainChild: true,
        needUpdateMain: false,
      };
      this.$emit("updateParent", JSON.stringify(row));
    },
    //上下偏移
    chooseBackTopOffsetUpdateToParent(params){
      if (params) {
        let p = JSON.parse(params);
        let row = {
          value: p.value,
          ename: "offsetUpAndDown",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: true,
          needUpdateMain: true,
        };
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //左右偏移
    chooseBackTopLRUpdateToParent(params){
       if (params) {
        let p = JSON.parse(params);
        let row = {
          value: p.value,
          ename: "leftAndRightOffset",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: true,
          needUpdateMain: true,
        };
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
    //显示高度
    chooseBackTopScrollTopUpdateToParent(params){
      if (params) {
        let p = JSON.parse(params);
        let row = {
          value: p.value,
          ename: "scrollTop",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: false,
          needUpdateMain: false,
        };
        this.$emit("updateParent", JSON.stringify(row));
      }
    },

    //切换“返回顶部”图标事件
    switchIconEventHandle() {
       let row = {
        value: this.oItem.value,
        ename: "iconEvent",
        rightIndex: this.rightIndex,
        catalogIndex: this.catalogIndex,
        needUpdateMainChild: false,
        needUpdateMain: false,
      };
      this.$emit("updateParent", JSON.stringify(row));
    },
    //选择完跳转链接
    chooseBackTopLinkChange(params) {
      if(params) {
        let p = JSON.parse(params);
        let row = {
          value: p.value,
          ename: "jumpLinkUrl",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: false,
          needUpdateMain: false,
        };
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.backTopCombination {
  display: flex;
  width: 100%;
  .styleWrapper {
    display: flex;
    width: 100%;
    .left {
      width: 100px;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      font-size: 12px;
      box-sizing: border-box;
    }
    .right {
      width: calc(100% - 100px);
      .el-radio-group {
        margin-bottom: 15px;
      }
      .iconWrapper {
        background-color: #f4f6f8;
        padding: 20px 15px 1px 0px;
        box-sizing: border-box;
        & > div {
          margin-bottom: 15px;
        }
      }
      .imgWrapper {
        background-color: #f4f6f8;
        padding: 20px 15px 1px 0px;
        box-sizing: border-box;
        & > div {
          margin-bottom: 15px;
        }
      }
    }
  }
  .positionWrapper {
    display: flex;

    width: 100%;
    .left {
      width: 100px;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      font-size: 12px;
      box-sizing: border-box;
    }
    .right {
      width: calc(100% - 100px);
      .el-radio-group {
        margin-bottom: 15px;
      }
      .positionWrapperSlider {
        background-color: #f4f6f8;
        padding: 20px 15px 1px 0px;
        box-sizing: border-box;
        & > div {
          margin-bottom: 15px;
        }
      }
    }
  }
  .eventWrapper {
    display: flex;
    width: 100%;

    .left {
      width: 100px;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      font-size: 12px;
      box-sizing: border-box;
    }
    .right {
      width: calc(100% - 100px);
      .el-radio-group {
        margin-bottom: 15px;
      }
      .eventWrapperChooseLink {
        padding: 20px 15px 20px 0px;
        box-sizing: border-box;
        background-color: #f4f6f8;
      }
    }
  }
}
</style>